<template>
  <el-dialog 
    :title="dialogTitle" 
    :visible.sync="dialogVisible" 
    width="900px" 
    append-to-body
    :close-on-click-modal="false"
  >
    <!-- 修改待审核状态的提示 -->
    <el-alert
      v-if="topic.auditStatus === '修改待审核' && topic.hasPendingChanges === 1"
      title="该题目有待审核的修改申请，下方将显示修改前后的对比"
      type="warning"
      :closable="false"
      style="margin-bottom: 20px;"
    />

    <!-- 普通详情展示（无待审核修改） -->
    <el-descriptions 
      v-if="topic.auditStatus !== '修改待审核' || topic.hasPendingChanges !== 1"
      :column="2" 
      border
    >
      <el-descriptions-item label="题目ID">{{ topic.topicId }}</el-descriptions-item>
      <el-descriptions-item label="教师姓名">{{ topic.teacherName }}</el-descriptions-item>
      <el-descriptions-item label="题目名称" :span="2">{{ topic.title }}</el-descriptions-item>
      <el-descriptions-item label="难度等级">
        <el-tag :type="getDifficultyType(topic.difficulty)" size="small">{{ topic.difficulty }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="最大名额">{{ topic.maxStudents }}</el-descriptions-item>
      <el-descriptions-item label="审核状态">
        <el-tag :type="getAuditStatusType(topic.auditStatus)" size="small">{{ topic.auditStatus }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="题目状态">
        <el-tag :type="getStatusType(topic.status)" size="small">{{ topic.status }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="技术标签" :span="2">
        <el-tag
          v-for="tag in parseTags(topic.tags)"
          :key="tag"
          size="small"
          style="margin-right: 5px;"
        >{{ tag }}</el-tag>
        <span v-if="!topic.tags || topic.tags === '[]'">暂无</span>
      </el-descriptions-item>
      <el-descriptions-item label="题目描述" :span="2">
        <div style="white-space: pre-wrap;">{{ topic.description || '暂无' }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="技能要求" :span="2">
        <div style="white-space: pre-wrap;">{{ topic.requirements || '暂无' }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间" :span="2">
        {{ parseTime(topic.createTime) }}
      </el-descriptions-item>
      <el-descriptions-item v-if="topic.auditStatus === '已拒绝'" label="拒绝理由" :span="2">
        <div style="color: #F56C6C;">{{ topic.auditOpinion }}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="topic.auditTime" label="审核时间" :span="2">
        {{ parseTime(topic.auditTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">
        {{ topic.remark || '暂无' }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 修改对比展示（有待审核修改） -->
    <div v-if="topic.auditStatus === '修改待审核' && topic.hasPendingChanges === 1">
      <el-row :gutter="20">
        <!-- 左侧：原内容 -->
        <el-col :span="12">
          <div class="compare-panel original-panel">
            <div class="panel-header">
              <i class="el-icon-document"></i>
              <span>原内容</span>
            </div>
            <el-descriptions :column="1" border size="small">
              <el-descriptions-item label="题目名称">
                {{ topic.title || '暂无' }}
              </el-descriptions-item>
              <el-descriptions-item label="难度等级">
                <el-tag :type="getDifficultyType(topic.difficulty)" size="small">
                  {{ topic.difficulty || '暂无' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="最大名额">
                {{ topic.maxStudents || '暂无' }}
              </el-descriptions-item>
              <el-descriptions-item label="技术标签">
                <el-tag
                  v-for="tag in parseTags(topic.tags)"
                  :key="tag"
                  size="small"
                  style="margin-right: 5px;"
                >{{ tag }}</el-tag>
                <span v-if="!topic.tags || topic.tags === '[]'">暂无</span>
              </el-descriptions-item>
              <el-descriptions-item label="题目描述">
                <div style="white-space: pre-wrap; max-height: 200px; overflow-y: auto;">
                  {{ topic.description || '暂无' }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="技能要求">
                <div style="white-space: pre-wrap; max-height: 200px; overflow-y: auto;">
                  {{ topic.requirements || '暂无' }}
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>

        <!-- 右侧：待审核内容 -->
        <el-col :span="12">
          <div class="compare-panel pending-panel">
            <div class="panel-header pending-header">
              <i class="el-icon-edit"></i>
              <span>待审核修改</span>
            </div>
            <el-descriptions :column="1" border size="small">
              <el-descriptions-item label="题目名称">
                <span :class="{ 'changed': hasChanged('title') }">
                  {{ topic.pendingTitle || '暂无' }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="难度等级">
                <el-tag 
                  :type="getDifficultyType(topic.pendingDifficulty)" 
                  size="small"
                  :class="{ 'changed': hasChanged('difficulty') }"
                >
                  {{ topic.pendingDifficulty || '暂无' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="最大名额">
                <span :class="{ 'changed': hasChanged('maxStudents') }">
                  {{ topic.pendingMaxStudents || '暂无' }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="技术标签">
                <span :class="{ 'changed': hasChanged('tags') }">
                  <el-tag
                    v-for="tag in parseTags(topic.pendingTags)"
                    :key="tag"
                    size="small"
                    style="margin-right: 5px;"
                  >{{ tag }}</el-tag>
                  <span v-if="!topic.pendingTags || topic.pendingTags === '[]'">暂无</span>
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="题目描述">
                <div 
                  style="white-space: pre-wrap; max-height: 200px; overflow-y: auto;"
                  :class="{ 'changed': hasChanged('description') }"
                >
                  {{ topic.pendingDescription || '暂无' }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="技能要求">
                <div 
                  style="white-space: pre-wrap; max-height: 200px; overflow-y: auto;"
                  :class="{ 'changed': hasChanged('requirements') }"
                >
                  {{ topic.pendingRequirements || '暂无' }}
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>
      </el-row>

      <!-- 其他不变的信息 -->
      <el-divider>其他信息</el-divider>
      <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="题目ID">{{ topic.topicId }}</el-descriptions-item>
        <el-descriptions-item label="教师姓名">{{ topic.teacherName }}</el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-tag :type="getAuditStatusType(topic.auditStatus)" size="small">{{ topic.auditStatus }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="题目状态">
          <el-tag :type="getStatusType(topic.status)" size="small">{{ topic.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间" :span="2">
          {{ parseTime(topic.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="最后更新时间" :span="2">
          {{ parseTime(topic.updateTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ topic.remark || '暂无' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "TopicDetail",
  data() {
    return {
      // 是否显示弹出层
      dialogVisible: false,
      // 题目信息
      topic: {}
    };
  },
  computed: {
    dialogTitle() {
      if (this.topic.auditStatus === '修改待审核' && this.topic.hasPendingChanges === 1) {
        return '题目修改审核对比';
      }
      return '题目详情';
    }
  },
  methods: {
    /** 打开对话框 */
    openDialog(topic) {
      this.topic = topic;
      this.dialogVisible = true;
    },
    /** 判断字段是否有变化 */
    hasChanged(field) {
      const fieldMap = {
        'title': ['title', 'pendingTitle'],
        'difficulty': ['difficulty', 'pendingDifficulty'],
        'maxStudents': ['maxStudents', 'pendingMaxStudents'],
        'tags': ['tags', 'pendingTags'],
        'description': ['description', 'pendingDescription'],
        'requirements': ['requirements', 'pendingRequirements']
      };
      
      const [originalField, pendingField] = fieldMap[field];
      const originalValue = this.topic[originalField];
      const pendingValue = this.topic[pendingField];
      
      // 处理null和undefined的情况
      const original = originalValue == null ? '' : String(originalValue);
      const pending = pendingValue == null ? '' : String(pendingValue);
      
      return original !== pending;
    },
    /** 解析标签 */
    parseTags(tags) {
      if (!tags) return [];
      try {
        return JSON.parse(tags);
      } catch (e) {
        return [];
      }
    },
    /** 难度等级标签类型 */
    getDifficultyType(difficulty) {
      const map = {
        '简单': 'success',
        '中等': '',
        '困难': 'danger'
      };
      return map[difficulty] || 'info';
    },
    /** 审核状态标签类型 */
    getAuditStatusType(auditStatus) {
      const map = {
        '待审核': 'warning',
        '修改待审核': 'warning',
        '已通过': 'success',
        '已拒绝': 'danger'
      };
      return map[auditStatus] || 'info';
    },
    /** 题目状态标签类型 */
    getStatusType(status) {
      const map = {
        '开放': 'success',
        '已满': 'warning',
        '已关闭': 'info'
      };
      return map[status] || 'info';
    }
  }
};
</script>

<style scoped>
.compare-panel {
  margin-bottom: 20px;
}

.panel-header {
  background: #f5f7fa;
  padding: 12px 15px;
  border: 1px solid #dcdfe6;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  font-weight: 600;
  color: #303133;
}

.panel-header i {
  margin-right: 5px;
}

.pending-header {
  background: #fdf6ec;
  border-color: #f5c842;
  color: #e6a23c;
}

.changed {
  background-color: #fef0f0;
  padding: 2px 4px;
  border-radius: 2px;
  color: #f56c6c;
  font-weight: 500;
}

/* 对比面板内的描述列表紧贴header */
.compare-panel ::v-deep .el-descriptions {
  border-radius: 0 0 4px 4px;
}

.compare-panel ::v-deep .el-descriptions__header {
  display: none;
}
</style>